<template>
  <view class="yy-scroll-view">
    <scroll-view scroll-y="true" class="scroll-wrapper" :scroll-top="scrollTop" @scroll="scroll"
      @scrolltolower="onScrollToLower">
      <slot name="default" :list="resultList"></slot>
      <view class="empty-text" v-if="loading">正在加载...</view>
      <view class="empty-text" v-if="finish">没有更多数据了~</view>
      <template v-if="!resultList.length">
        <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon1.png'">
        </u-empty>
      </template>
    </scroll-view>
  </view>
</template>

<script>
  import {
    getAction
  } from '../../utils/request'
  import {
    Toast
  } from '../../utils/util'
  export default {
    props: {
      requestUrl: {
        required: true,
        type: String,
        default: ''
      },
      // 要传递给组件的静态参数
      staticParams: {
        type: Object,
        default: () => ({})
      },
      // 是否自动请求
      autoRequest: {
        type: Boolean,
        default: true
      },
      requestCallback: {
        type: Function,
        default: () => {}
      }
    },
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        pageInfo: {
          pageNo: 1,
          pageSize: 50
        },
        pages: 0,
        finish: false,
        loading: false,
        resultList: [],
        // scroll-view 属性
        scrollTop: 0,
        old: {
          scrollTop: 0
        }
      }
    },
    mounted() {
      if (this.autoRequest) {
        this.getList()
      }
    },
    methods: {
      scroll: function(e) {
        this.old.scrollTop = e.detail.scrollTop
      },
      onScrollToLower() {
        if (this.pageInfo.pageNo < this.pages) {
          this.pageInfo.pageNo++
        } else {
          this.finish = true
          return uni.showToast({
            icon: 'none',
            title: '没有更多数据了~'
          })
        }
        this.getList('push')
      },
      getList(type = 'init', dynamicParams = {}) {
        // 如果是初始化，则从第一页开始请求
        if (type === 'init') {
          this.pageInfo.pageNo = 1
          // 如果初始化了，则需要滚动到顶部
          this.scrollTop = this.old.scrollTop
          this.$nextTick(function() {
            this.scrollTop = 0
          });
        }
        let params = {
          ...this.pageInfo,
          ...this.staticParams,
          ...dynamicParams
        }
        if (!this.requestUrl) {
          Toast('请求地址为必传项！')
          return
        }
        this.loading = true
        getAction(this.requestUrl, params)
          .then((res) => {
            let records = res.result.records || []
            this.pages = res.result.pages
            if (type === 'init') {
              this.resultList = records
            }
            if (type === 'push') {
              this.resultList = [...this.resultList, ...records]
            }
            // 处理请求回来的参数
            if (this.requestCallback) {
              this.requestCallback(this.resultList)
            }
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .yy-scroll-view {
    width: 100%;
    height: 100%;

    .scroll-wrapper {
      width: 100%;
      height: 100%;
    }

    .empty-text {
      text-align: center;
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
      margin-top: 8rpx;
    }
  }
</style>